<template>
  <div class="vessel">
    <div class="typeArea">
      <div class="typeArea-head">
        <a href="">
          <img src="../../utils/imgs/logo.png" alt="" />
        </a>
        <div>深圳</div>
        <div>首页</div>
        <div style="background-color: #ef4238; color: #fff">电影</div>
        <div>影院</div>
        <div>演出</div>
        <div>榜单</div>
        <div>热点</div>
        <div>商城</div>
        <div style="width: 132px">APP下载</div>
        <div style="width: 220px"><input type="text" /></div>
        <div style="width: 78px">
          <img
            style="width: 40px; margin-top: 20px"
            src="https://p0.meituan.net/movie/7dd82a16316ab32c8359debdb04396ef2897.png"
            alt=""
          />
        </div>
      </div>
    </div>
    <div class="tab">
      <div class="tab-div">
        <div style="color: #ef4238">正在热映</div>
        <div>即将上映</div>
        <div>经典影片</div>
      </div>
    </div>

    <div class="body-top">
      <div class="body-top-div">
        <div class="body-top-div-type">
          <div class="body-classify">类型:</div>
          <ul class="body-classify-list">
            <li v-for="item in type" :key="item.text">{{ item.text }}</li>
          </ul>
        </div>
        <div class="body-top-div-type">
          <div class="body-classify">区域:</div>
          <ul class="body-classify-list">
            <li v-for="item in area" :key="item.text">{{ item.text }}</li>
          </ul>
        </div>
        <div class="body-top-div-type">
          <div class="body-classify">年代:</div>
          <ul class="body-classify-list">
            <li v-for="item in age" :key="item.text">{{ item.text }}</li>
          </ul>
        </div>
      </div>
    </div>

    <div class="body-bottom">
      <div class="order">
        <div class="order-list">
          <div class="sign"></div>
          <div>按热门排序</div>
        </div>
        <div class="order-list">
          <div class="sign"></div>
          <div>按时间排序</div>
        </div>
        <div class="order-list">
          <div class="sign"></div>
          <div>按评价排序</div>
        </div>
      </div>
      <div class="display">
        <div class="display-list" v-for="item in display" :key="item.title">
          <img :src="item.src" />
          <span>{{ item.title }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "MaoYanMovie",
};
</script>

<script lang="ts" setup>
const display = [
  {
    src: "https://p0.pipi.cn/mmdb/25bfd692ddd7e13139313954ee2938728ad6a.jpg?imageView2/1/w/160/h/220",
    title: "        名侦探柯南：万圣节的新娘",
    goupiao: "预售",
  },
  {
    src: "https://p0.pipi.cn/mmdb/25bfd692ddd51bf0ee7df5e957c0841af9898.jpg?imageView2/1/w/160/h/220",
    title: "        人生路不熟",
    goupiao: "",
  },
  {
    src: "https://p0.pipi.cn/mmdb/25bfd6dd06d2ff3ba3be126918a5cab2db871.jpg?imageView2/1/w/160/h/220",
    title: "        可不可以不要离开我",
    goupiao: "",
  },
  {
    src: "https://p0.pipi.cn/mmdb/25bfd69251b51b9235281ed1be968a257e0fb.jpg?imageView2/1/w/160/h/220",
    title: "        坠落",
    goupiao: "",
  },
  {
    src: "https://p0.pipi.cn/mmdb/25bfd6337e1b12339eb12daddf10a9a5f57bc.jpg?imageView2/1/w/160/h/220",
    title: "        流浪地球2",
    goupiao: "",
  },
  {
    src: "https://p0.pipi.cn/mmdb/25bfd651b5392302ff7a35cd312dd985b38a3.jpg?imageView2/1/w/160/h/220",
    title: "        倒数说爱你",
    goupiao: "",
  },
  {
    src: "https://p0.pipi.cn/mmdb/25bfd69292351b9ab4230f63471e49ee0a804.jpg?imageView2/1/w/160/h/220",
    title: "        消失的她",
    goupiao: "",
  },
  {
    src: "https://p0.pipi.cn/mmdb/25bfd692d7c5bfd7c339dd5fda72a27ecf922.jpg?imageView2/1/w/160/h/220",
    title: "        个十百千万",
    goupiao: "",
  },
  {
    src: "https://p0.pipi.cn/mmdb/25bfd651ecd5bf8ea3b860d86473b7e916b76.jpg?imageView2/1/w/160/h/220",
    title: "        天之书",
    goupiao: "",
  },
  {
    src: "https://p0.pipi.cn/mmdb/25bfd692dddf2ae5bcbe123a1e3c0da5710fa.jpg?imageView2/1/w/160/h/220",
    title: "        沼泽深处的女孩",
    goupiao: "预售",
  },
  {
    src: "https://p0.pipi.cn/mmdb/25bfd6928d30fa3ba35bf14404a347f9c6e8a.jpg?imageView2/1/w/160/h/220",
    title: "        八角笼中",
    goupiao: "",
  },
  {
    src: "https://p0.pipi.cn/mmdb/25bfd633c7eddd07acddd28b8617eb174d960.jpg?imageView2/1/w/160/h/220",
    title: "        深海",
    goupiao: "",
  },
  {
    src: "https://p0.pipi.cn/mmdb/d2dad5927a30fa8d33b8605f671206f584437.jpg?imageView2/1/w/160/h/220",
    title: "        无名",
    goupiao: "",
  },
  {
    src: "https://p0.pipi.cn/mmdb/25bfd6d7b5351b7df5e19b7ca5fa7d14f6fca.jpg?imageView2/1/w/160/h/220",
    title: "        交换人生",
    goupiao: "",
  },
  {
    src: "https://p0.pipi.cn/mmdb/25bfd69292333850157a3553f226709e69e22.jpg?imageView2/1/w/160/h/220",
    title: "        龙马精神",
    goupiao: "",
  },
  {
    src: "https://p0.pipi.cn/mmdb/25bfd692dddc6967cbe19bffb4092bae5193c.jpg?imageView2/1/w/160/h/220",
    title: "        忍者神龟：崛起",
    goupiao: "预售",
  },
  {
    src: "https://p0.pipi.cn/mmdb/25bfd692923f2acf3eecd8f401726b1a07bbb.jpg?imageView2/1/w/160/h/220",
    title: "        念念相忘",
    goupiao: "",
  },
  {
    src: "https://p0.pipi.cn/mmdb/25bfd671339b12281ee7aa06bc67e58a103c9.jpg?imageView2/1/w/160/h/220",
    title: "        热烈",
    goupiao: "",
  },
  {
    src: "https://p0.pipi.cn/mmdb/25bfd6928d35bfc696cbae80fcb5326a09bb2.png?imageView2/1/w/160/h/220",
    title: "        丹顶鹤",
    goupiao: "",
  },
  {
    src: "https://p0.pipi.cn/mmdb/25bfd651ecd5bf3ba30fafef08a8415b4abca.jpg?imageView2/1/w/160/h/220",
    title: "        爆裂蝴蝶",
    goupiao: "",
  },
  {
    src: "https://p0.pipi.cn/mmdb/25bfd6025bf51bddd2e7aae175db712038100.jpg?imageView2/1/w/160/h/220",
    title: "        刺猬索尼克2",
    goupiao: "",
  },
  {
    src: "https://p0.pipi.cn/mmdb/d2dad52fc6951b67cbe7aa9e33bddb10275de.png?imageView2/1/w/160/h/220",
    title: "        超能一家人",
    goupiao: "",
  },
  {
    src: "https://p0.pipi.cn/mmdb/d2dad5927a387a17895015380b2b9ab15cb2e.jpg?imageView2/1/w/160/h/220",
    title: "        望道",
    goupiao: "",
  },
  {
    src: "https://p0.pipi.cn/mmdb/25bfd692ddd338923521f06035f337a1a059f.jpg?imageView2/1/w/160/h/220",
    title: "        杀掉那个魔术师",
    goupiao: "预售",
  },
  {
    src: "https://p0.pipi.cn/mmdb/25bfd6928d3c6906d6ddd2e98830a1f536bf3.jpg?imageView2/1/w/160/h/220",
    title: "        小丑奇缘",
    goupiao: "",
  },
  {
    src: "https://p0.pipi.cn/mmdb/25bfd6928d30fa3ba30e139b7f593fc0aa6e1.jpg?imageView2/1/w/160/h/220",
    title: "        保你平安",
    goupiao: "",
  },
  {
    src: "https://p0.pipi.cn/mmdb/25bfd6dd33951bc7ed537cbf6d38766914ba6.jpg?imageView2/1/w/160/h/220",
    title: "        中国乒乓",
    goupiao: "",
  },
  {
    src: "https://p0.pipi.cn/mmdb/25bfd6335bf338338f339e1892ed55e67bf13.jpg?imageView2/1/w/160/h/220",
    title: "        扫黑·拨云见日",
    goupiao: "",
  },
  {
    src: "https://p0.pipi.cn/mmdb/25bfd6ddd7c2ffe7aab12d8c5f195cc2c54b3.jpg?imageView2/1/w/160/h/220",
    title: "        请别相信她",
    goupiao: "",
  },
  {
    src: "https://p0.pipi.cn/mmdb/25bfd651c6933867cb339e3646c6d19b78e8a.jpg?imageView2/1/w/160/h/220",
    title: "        您好，北京",
    goupiao: "预售",
  },
];
const type = [
  { text: "全部" },
  { text: "爱情" },
  { text: "喜剧" },
  { text: "动画" },
  { text: "剧情" },
  { text: "恐怖" },
  { text: "惊悚" },
  { text: "科幻" },
  { text: "动作" },
  { text: "悬疑" },
  { text: "犯罪" },
  { text: "冒险" },
  { text: "战争" },
  { text: "奇幻" },
  { text: "运动" },
  { text: "家庭" },
  { text: "古装" },
  { text: "武侠" },
  { text: "西部" },
  { text: "历史" },
  { text: "传记" },
  { text: "歌舞" },
  { text: "黑色电影" },
  { text: "短片" },
  { text: "纪录片" },
  { text: "戏曲" },
  { text: "音乐" },
  { text: "灾难" },
  { text: "青春" },
  { text: "儿童" },
  { text: "其他" },
];
const area = [
  { text: "全部" },
  { text: "大陆" },
  { text: "美国" },
  { text: "韩国" },
  { text: "日本" },
  { text: "中国香港" },
  { text: "中国台湾" },
  { text: "泰国" },
  { text: "印度" },
  { text: "法国" },
  { text: "英国" },
  { text: "俄罗斯" },
  { text: "意大利" },
  { text: "西班牙" },
  { text: "德国" },
  { text: "波兰" },
  { text: "澳大利亚" },
  { text: "伊朗" },
  { text: "其他" },
];
const age = [
  { text: "全部" },
  { text: "2022" },
  { text: "2021" },
  { text: "2020" },
  { text: "2019" },
  { text: "2018" },
  { text: "2017" },
  { text: "2016" },
  { text: "2015" },
  { text: "2014" },
  { text: "2013" },
  { text: "2012" },
  { text: "2011" },
  { text: "2000-2010" },
  { text: "90年代" },
  { text: "80年代" },
  { text: "70年代" },
  { text: "更早" },
];
</script>

<style scoped>
body {
  width: 100%;
  height: 100%;
}
ul {
  list-style: none;
}
.typeArea {
  width: 100%;
  height: 80px;
  text-align: center;
  text-align: center;
  position: relative;
}
.typeArea-head {
  width: 1200px;
  height: 80px;
  line-height: 80px;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -600px;
  display: flex;
}
.typeArea-head div {
  width: 76px;
  height: 80px;
  font-size: 18px;
}
.typeArea-head div input {
  background: none;
  outline: none;
  border: 1px solid #ccc;
  width: 220px;
  height: 40px;
  border-radius: 30px;
}
.tab {
  width: 100%;
  height: 60px;
  background-color: #47464a;
  position: relative;
  margin-top: 1px;
}
.tab-div {
  position: absolute;
  display: flex;
  width: 432px;
  height: 60px;
  line-height: 60px;
  left: 50%;
  margin-left: -216px;
}
.tab-div div {
  width: 144px;
  text-align: center;
  color: #8e9295;
}

.body-top {
  position: relative;
  width: 100%;
  height: 224px;
  margin-top: 40px;
}
.body-top-div {
  width: 1120px;
  height: 224px;
  position: absolute;
  left: 50%;
  margin-left: -560px;
  font-size: 14px;
  border: 1px solid#e5e5e5;
}
.body-top-div-type {
  height: 74px;
  display: flex;
  border-bottom: 1px solid#e5e5e5;
}
.body-classify {
  width: 63px;
  height: 74px;
  box-sizing: border-box;
  text-align: center;
  padding: 6px 6px;
  color: #8e9295;
}
.body-classify-list {
  width: 1090px;
  display: flex;
  flex-wrap: wrap;
  height: 20px;
}
.body-classify-list li:nth-child(1) {
  background-color: #f34d41;
  color: #fff;
  border-radius: 30px;
}
.body-classify-list li {
  width: 56px;
  height: 20px;
  line-height: 20px;
  padding: 6px 5px;
  text-align: center;
}

.body-bottom {
  width: 100%;
  height: 1610px;
  margin-top: 40px;
  position: relative;
}
.order {
  position: absolute;
  left: 50%;
  width: 1120px;
  height: 21px;
  margin-left: -560px;
  display: flex;
}
.order-list {
  display: flex;
  /* flex-wrap: wrap; */
  width: 150px;
  padding: 5px 0;
}
.order .sign {
  width: 7px;
  height: 7px;
  /* background-color: red; */
  border-radius: 50%;
  border: 4px solid red;
  margin: 3px 5px;
  display: flex;
}
.order .sign1 {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1px solid #e5e5e5;
}
.display {
  width: 1145px;
  height: 1674px;
  position: absolute;
  left: 50%;
  margin-left: -585px;
  display: flex;
  flex-wrap: wrap;
}
.display-list {
  width: 160px;
  height: 220px;
  margin: 50px 0 0 30px;
}
</style>
